<template>
  <div>
    <div id="container1"></div>
    <div id="container2"></div>
    <div id="container3"></div>
    <div id="container4"></div>
  </div>
</template>

<script>
import * as THREE from 'three'
import {GLTFLoader} from "three/addons/loaders/GLTFLoader";

export default {
  name: "video-single",
  data() {
    return{
      scene:null,
      camera1:null,
      camera2:null,
      camera3:null,
      camera4:null,
      controls:null,
      renderer1:null,
      renderer2:null,
      renderer3:null,
      renderer4:null,
      container1:null,
      container2:null,
      container3:null,
      container4:null,
      model:null,
    }
  },
  methods:{
    initScene(){
      this.scene = new THREE.Scene();
    },
    initCamera(){
      this.camera1 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera1.position.set(200,0,200);
      this.camera1.lookAt(0,100,0)

      this.camera2 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera2.position.set(-200,0,-200);
      this.camera2.lookAt(0,100,0)

      this.camera3 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera3.position.set(-200,0,200);
      this.camera3.lookAt(0,100,0)

      this.camera4 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera4.position.set(200,0,-200);
      this.camera4.lookAt(0,100,0)
    },
    initLight(){
      //添加两个平行光
      const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight1.position.set(600,600,600)
      this.scene.add(directionalLight1);
      const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight2.position.set(-600,600,-600)
      this.scene.add(directionalLight2);
      const directionalLight3 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight3.position.set(-600,600,600)
      this.scene.add(directionalLight3);
      const directionalLight4 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight4.position.set(600,600,-600)
      this.scene.add(directionalLight4);
    },
    initModel(){
      const loader = new GLTFLoader()
      loader.load("/static/models/girl.glb", (gltf) => {
        this.model = gltf.scene;
        this.scene.add(this.model)   // 加入场景
      })
    },
    initRenderer(){
      this.renderer1 = new THREE.WebGLRenderer({ antialias: true });
      this.container1 = document.getElementById("container1")
      this.renderer1.setSize(this.container1.clientWidth, this.container1.clientHeight);
      this.renderer1.setClearColor('#FFFFFF', 0);
      this.container1.appendChild(this.renderer1.domElement);

      this.renderer2 = new THREE.WebGLRenderer({ antialias: true });
      this.container2 = document.getElementById("container2")
      this.renderer2.setSize(this.container2.clientWidth, this.container2.clientHeight);
      this.renderer2.setClearColor('#FFFFFF', 0);
      this.container2.appendChild(this.renderer2.domElement);

      this.renderer3 = new THREE.WebGLRenderer({ antialias: true });
      this.container3 = document.getElementById("container3")
      this.renderer3.setSize(this.container3.clientWidth, this.container3.clientHeight);
      this.renderer3.setClearColor('#FFFFFF', 0);
      this.container3.appendChild(this.renderer3.domElement);

      this.renderer4 = new THREE.WebGLRenderer({ antialias: true });
      this.container4 = document.getElementById("container4")
      this.renderer4.setSize(this.container4.clientWidth, this.container4.clientHeight);
      this.renderer4.setClearColor('#FFFFFF', 0);
      this.container4.appendChild(this.renderer4.domElement);
    },
    initAnimate() {
      if(this.model){
        this.model.rotation.y += 0.03;
      }
      requestAnimationFrame(this.initAnimate);
      this.renderer1.render(this.scene, this.camera1);
      this.renderer2.render(this.scene, this.camera2);
      this.renderer3.render(this.scene, this.camera3);
      this.renderer4.render(this.scene, this.camera4);
    },
    initPage(){
      this.initScene();
      this.initCamera();
      this.initLight();
      this.initRenderer();
      this.initModel();
      this.initAnimate();
    }
  },
  mounted() {
    this.initPage()
  }
}
</script>

<style scoped>
#container1{
  position:absolute;
  left:400px;
  width:400px;
  height:400px;
  background-color: #AAAAAA;
}
#container2{
  position:absolute;
  top:300px;
  left:700px;
  width:400px;
  height:400px;
  transform: rotate(90deg);
  background-color: #AAAAAA;
}
#container3{
  position:absolute;
  top:600px;
  left:400px;
  width:400px;
  height:400px;
  transform: rotate(180deg);
  background-color: #AAAAAA;
}
#container4{
  position:absolute;
  top:300px;
  left:100px;
  width:400px;
  height:400px;
  transform: rotate(270deg);
  background-color: #AAAAAA;
}
table{
  width:100%;
  border-color: #FFFFFF;  /*设置边框颜色*/
}
th,td{
  width:25%;
}
</style>
